<template>
  <div>    
    <div class="divLocationView">
 <div class="divLocationViewCondition">
  <div class="divAreaTop">
    <div class="divTitle">库区选择</div>
    <div class="elselect">
      <el-select placeholder="请选择" v-model="test.warehouseId" style="width: 100%;">
              <el-option
                v-for="item in options"
                :key="item.id"
                :label="item.name"
                :value="item.id">
              </el-option>
            </el-select>
    </div>
  </div>
 <div class="divAreaContent">
  <el-input placeholder="请输入库区的名称" suffix-icon="el-icon-search" style="margin-top:-20px"></el-input>
 </div>
 </div>
 <div class="divDivision"></div> 
 <!-- <div class="divLocationViewDisplay"> -->
  <div class="divTopright">
    <div class="title" style="margin-right:50px">库区总览</div>
    <span class="title" >库存总计:</span>
   <div class="title" style="display:flex"><span class="fangkuai"></span> 停用库位:</div>
   <div class="title" style="display:flex"><span class="fangkuai" style="backgroundColor:rgb(0, 190, 118)"></span> 占用库位:</div>
   <div class="title" style="display:flex;"><span class="fangkuai" style="backgroundColor:rgb(178, 220, 204)"></span> 空闲库位:</div>

  </div>
 <!-- </div> -->
    </div>
  </div>
</template>

<script>
import {list,areaId} from '@/api/huopinshitu'
export default {
data(){
  return{
    options:'',
    test:{
      warehouseId:''
    }
  }
},
created(){
  this.list()
},
methods:{
  async list(){
    const {data:{data}}=await list()
    // console.log(data);
    this.options=data
  }
}
}
</script>

<style lang="less" scoped>
.divLocationView {
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 0 6px 0 rgb(144 142 142 / 17%);
    margin: 20px 29px 30px 29px;
    height: calc(100vh - 114px);
 .divLocationViewCondition {
    width: 263px;
    padding: 27px 19px 27px 20px;
    float: left;
    .divAreaTop{
      margin-bottom: 21px;
      .divTitle{
        width: 64px;
    height: 22px;
    font-size: 16px;
    font-family: PingFangSC,PingFangSC-Medium;
    font-weight: 500;
    text-align: left;
    color: #332929;
    line-height: 22px;
    margin-bottom: 22px;
    margin-left: 10px;
      }
      .elselect{
        width: 224px;
      }
    }
}
.divDivision {
    float: left;
    width: 10px;
    height: 100%;
    background: linear-gradient(270deg,hsla(0,0%,100%,0),rgba(99,97,96,.1));
}
.divAreaContent{
  width: 210px;
    background: #fdfcf9;
    border: 1px solid #f7f2f1;
    border-radius: 6px;
  padding: 30px 29px 0 26px;
}

}
    .divTopright{   
      display: flex; 
      margin-bottom: 21px;
      height: 22px;
      .title{
        line-height: 22px;
       
    height: 22px;
    font-size: 16px;
    font-family: PingFangSC,PingFangSC-Medium;
    font-weight: 500;
    text-align: left;
    color: #332929;
    line-height: 22px;
    float: left;
    margin-left: 80px;
    margin-top: 22px;
      }
    }
    .fangkuai{
      height: 13px;
      margin-top: 5px;
      margin-right: 10px;
      width: 13px;
      background-color: rgb(195, 195, 195);
      display: block;
    }

</style>